<template>
  <div id="map"></div>
</template>

<script>
export default {
  data () {
    return {
      map: {},
      T: ''
    }
  },
  props: {
    landDetailData: {
      type: Object
    }
  },
  watch: {},
  mounted () {
    setTimeout(() => {
      this.load()
    }, 200)
  },
  methods: {
    load () {
      // console.log(this.landDetailData, 'z')
      const init = new Promise((resolve, reject) => {
        if (window.T) {
          // console.log('地图初始化成功')
          resolve(window.T)
        }
      })
      init.then((T) => {
        this.T = T
        // 卫星底图图层
        const lay = new T.TileLayer('http://t0.tianditu.gov.cn/img_w/wmts?' +
        'SERVICE=WMTS&REQUEST=GetTile&VERSION=1.0.0&LAYER=img&STYLE=default&TILEMATRIXSET=w&FORMAT=tiles' +
        '&TILEMATRIX={z}&TILEROW={y}&TILECOL={x}&tk=3608866120174dc307d1ce121ccfde22')
        this.map = new T.Map('map', { layers: [lay] })
        // const geoCenter = JSON.parse(this.landDetailData.geoCenter) // 中心点
        // const geoZoom = Number(this.landDetailData.geoZoom) // 缩放值
        // this.map.centerAndZoom(
        //   new T.LngLat(geoCenter.lng, geoCenter.lat),
        //   geoZoom
        // )
        const geoInfo = JSON.parse(this.landDetailData.geoInfo)
        this.map.setViewport(geoInfo)
        const points = []
        for (let i = 0; i < geoInfo.length; i++) {
          points.push(
            new T.LngLat(geoInfo[i].lng, geoInfo[i].lat)
          )
        }
        // 创建面对象
        const polygon = new T.Polygon(points, {
          color: 'blue',
          weight: 3,
          opacity: 0.5,
          fillColor: '#FFFFFF',
          fillOpacity: 0.5,
          test: `<p>名称：${this.landDetailData.landName}</p><p>面积：${this.landDetailData.landArea}亩</p>`
        })
        // polygon.addEventListener('click', this.getinfo)

        // 向地图上添加面
        this.map.addOverLay(polygon)

        // const ctrl = new T.Control.MapType([
        //   {
        //     title: '卫星',
        //     icon: 'http://api.tianditu.gov.cn/v4.0/image/map/maptype/satellite.png',
        //     layer: window.TMAP_SATELLITE_MAP
        //   }
        // ])

        // this.map.addControl(ctrl)
      })
    }
  }
}
</script>
<style lang="scss" scoped>
#map {
  width: 22.2396vw;
  height: 11.4583vw * 0.834;
}
</style>
